<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{ topicCount }}</div>
              <div>帖子总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-num">{{ commentCount }}</div>
              <div>评论总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-3">
            <div class="grid-cont-right">
              <div class="grid-num">{{ bestTopic }}</div>
              <div>最好的帖子</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-4">
            <div class="grid-cont-right">
              <div class="grid-num">{{ bestComment }}</div>
              <div>最好的评论</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="8">
        <h3 style="margin-bottom: 20px; text-align: center">用户性别比例</h3>
        <div style="background-color: white">
          <ve-pie :data="userSex" :theme="options"></ve-pie>
        </div>
      </el-col>
      <el-col :span="16">
        <h3 style="margin-bottom: 20px; text-align: center">用户行业比例</h3>
        <div style="background-color: white">
          <ve-pie :data="industry" :extend="pieExend"></ve-pie>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <h3 style="margin-bottom: 20px; text-align: center">用户地区分布</h3>
        <div style="background-color: white">
          <ve-histogram
            :data="provinceLocation"
            :extend="chartExend"
          ></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mixin } from "../mixins";
import axios from "axios";

export default {
  mixins: [mixin],
  data() {
    this.pieExend = {
      series: {
        //设置位置
        center: ["40%", "50%"],
        radius: ["20%", "90"],
      },
      legend: {
        type: "scroll", //设置超出部分滚动
        orient: "vertical", //设置竖向排列
        show: true, //是否显示，默认开启
        right: 0, //设置位置
        top: 20,
        bottom: 20,

        textStyle: {
          //文字样式
          fontSize: 8,
        },
        formatter: function (name) {
          //超出部分隐藏显示
          return name.length > 12 ? name.slice(0, 12) + "..." : name;
        },
      },
    };
    this.chartExend = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          type: "category",
          interval: 0,
          formatter: function (params) {
            var newParamsName = "";
            const paramsNameNumber = params.length;
            const provideNumber = 1; // 单行显示文字个数
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        },
      },
    };
    return {
      user: [],
      userSex: {
        columns: ["性别", "总数"],
        rows: [
          { 性别: "男", 总数: 0 },
          { 性别: "女", 总数: 0 },
          { 性别: "保密", 总数: 0 },
        ],
      },
      provinceLocation: {
        columns: ["省份", "总数"],
        rows: [
          { 省份: "北京市", 总数: 0 },
          { 省份: "天津市", 总数: 0 },
          { 省份: "上海市", 总数: 0 },
          { 省份: "重庆市", 总数: 0 },
          { 省份: "河北省", 总数: 0 },
          { 省份: "山西省", 总数: 0 },
          { 省份: "辽宁省", 总数: 0 },
          { 省份: "吉林省", 总数: 0 },
          { 省份: "黑龙江省", 总数: 0 },
          { 省份: "江苏省", 总数: 0 },
          { 省份: "浙江省", 总数: 0 },
          { 省份: "安徽省", 总数: 0 },
          { 省份: "福建省", 总数: 0 },
          { 省份: "江西省", 总数: 0 },
          { 省份: "山东省", 总数: 0 },
          { 省份: "河南省", 总数: 0 },
          { 省份: "湖北省", 总数: 0 },
          { 省份: "湖南省", 总数: 0 },
          { 省份: "广东省", 总数: 0 },
          { 省份: "海南省", 总数: 0 },
          { 省份: "四川省", 总数: 0 },
          { 省份: "贵州省", 总数: 0 },
          { 省份: "云南省", 总数: 0 },
          { 省份: "陕西省", 总数: 0 },
          { 省份: "甘肃省", 总数: 0 },
          { 省份: "青海省", 总数: 0 },
          { 省份: "台湾省", 总数: 0 },
          { 省份: "内蒙古自治区", 总数: 0 },
          { 省份: "广西壮族自治区", 总数: 0 },
          { 省份: "西藏自治区", 总数: 0 },
          { 省份: "宁夏回族自治区", 总数: 0 },
          { 省份: "新疆维吾尔自治区", 总数: 0 },
          { 省份: "香港特别行政区", 总数: 0 },
          { 省份: "澳门特别行政区", 总数: 0 },
        ],
      },
      industry: {
        columns: ["行业", "总数"],
        rows: [
          { 行业: "农、 林、 牧、 渔业", 总数: 0 },
          { 行业: "采矿业", 总数: 0 },
          { 行业: "制造业", 总数: 0 },
          { 行业: "电力、 热力、 燃气及水生产和供应业", 总数: 0 },
          { 行业: "建筑业", 总数: 0 },
          { 行业: "批发和零售业", 总数: 0 },
          { 行业: "交通运输、 仓储和邮政业", 总数: 0 },
          { 行业: "住宿和餐饮业", 总数: 0 },
          { 行业: "信息传输、 软件和信息技术服务业", 总数: 0 },
          { 行业: "金融业", 总数: 0 },
          { 行业: "房地产业", 总数: 0 },
          { 行业: "租赁和商务服务业", 总数: 0 },
          { 行业: "科学研究和技术服务业", 总数: 0 },
          { 行业: "水利、 环境和公共设施管理业", 总数: 0 },
          { 行业: "居民服务、 修理和其他服务业", 总数: 0 },
          { 行业: "教育", 总数: 0 },
          { 行业: "卫生和社会工作", 总数: 0 },
          { 行业: "公共管理、 社会保障和社会组织", 总数: 0 },
          { 行业: "国际组织", 总数: 0 },
        ],
      },

      options: {
        color: ["#87CEFA", "#FFC0CB", "#E6E61A"],
      },
      options1: {
        color: ["#1E90FF", "#7B68EE"],
      },
      // options2: {
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       // 坐标轴指示器，坐标轴触发有效
      //       type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      //     },
      //   },
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      // },
      options3: {
        color: ["#FD8A61"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
      },
      topicCount: 0,
      commentCount: 0,
      bestTopic: 0,
      bestComment: 0,
      userCount: 0,
      questionCount: 0,
      answerCount: 0,
      plCount: 0,
    };
  },
  mounted() {
    this.getTopicData();
  },
  methods: {
    getTopicData() {
      var _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/admin/topicdata",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.topicCount = response.topicCount;
          _this.commentCount = response.commentCount;
          _this.bestTopic = response.bestTopic;
          _this.bestComment = response.bestComment;
        },
      });
    },
    getUser() {
      axios.post("api/getallusers").then((res) => {
        console.log(res);
        this.userCount = res.data.length;
        this.userSex.rows[0]["总数"] = this.setSex("男", res.data);
        this.userSex.rows[1]["总数"] = this.setSex("女", res.data);
        this.userSex.rows[2]["总数"] = this.setSex("保密", res.data);
        for (let i = 0; i < 34; i++) {
          this.provinceLocation.rows[i]["总数"] = this.setProvince(
            this.provinceLocation.rows[i]["省份"],
            res.data
          );
          console.log(
            this.provinceLocation.rows[i]["省份"],
            this.provinceLocation.rows[i]["总数"]
          );
        }
        for (let i = 0; i < 19; i++) {
          this.industry.rows[i]["总数"] = this.setIndustry(
            this.industry.rows[i]["行业"],
            res.data
          );
        }
      });
    },
  },
};
</script>

<style>
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}
</style>
